<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- STYLESHEETS -->
    <!--[if lt IE 9]>
    <script src="../../js/flot/excanvas.min.js"></script>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
    <link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
    <link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
    <link rel="stylesheet" type="text/css" href="../../css/responsive.css">

    <link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- file-input -->
    <link rel="stylesheet" type="text/css" href="../../js/file-input/fileinput.css"/>
    <!-- SELECT2 -->
    <link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css"/>
    <!-- UNIFORM -->
    <link rel="stylesheet" type="text/css" href="../../js/uniform/css/uniform.default.min.css"/>
    <!-- datatable -->
    <link rel="stylesheet" href="../../js/datatables/datatable.css">
    <!-- WIZARD -->
    <link rel="stylesheet" type="text/css" href="../../js/bootstrap-wizard/wizard.css"/>
    <link rel="stylesheet" href="../../js/datepicker/datepicker.css">
    <!-- FONTS
<link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
--> <!-- file-input -->
    <link rel="stylesheet" type="text/css" href="../../js/file-input/fileinput.css"/>
    <!-- JQUERY -->
    <script src="../../js/jquery/jquery-2.0.3.min.js"></script>
    <script src="../../js/common.js"></script>

    <style>

        #main{
            min-height:70px;
            display: block;
        }
        .left {
            float: left;
            width: 45%;
        }

        .right {
            float: left;
            width: 55%;
            position: relative;
        }

        .floatDiv {
            width: 160px;
            height: 150px;
            border: 1px dotted blue;
            padding: 10px;
            position: relative;
            left: 65%;
            top: -45%;
        }
    </style>
</head>

<body>
<header class="navbar clearfix" id="header">
</header>

<!-- PAGE -->
<section id="page">
    <!-- SIDEBAR -->
    <div id="sidebar" class="sidebar">
        <div class="sidebar-menu nav-collapse">

            <!-- SIDEBAR MENU -->
            <ul>

            </ul>
            <!-- /SIDEBAR MENU -->
        </div>

    </div>
    <!-- /SIDEBAR -->
    <div id="main-content">

        <div class="container">
            <div class="row">
                <div id="content" class="col-lg-12" style="padding-top: 20px">
                    <!-- PAGE HEADER-->
                    <form id="viewForm" style="display: block;">


                        <div class="form-group mrg-bt10" id="changeContractCode">
                            <label class="control-label col-md-2" style="width: 110px">主合同编号：</label>
                            <div class="col-md-1 inline" style="width: 150px" >

                            </div>

                            <label class="control-label col-md-2" style="width: 130px">变更协议编号：</label>
                            <div class="col-md-1 inline" style="width: 140px">

                            </div>

                            <label class="control-label col-md-2" style="width: 100px">合同金额：</label>
                            <div class="col-md-1 inline" >

                            </div>

                            <label class="control-label col-md-1" style="width: 100px">订货量：</label>
                            <div class="col-md-1 inline" >

                            </div>
                        </div>

                        <div class="form-group mrg-bt10 percentBox" style="min-height: 120px" id="billBox">
                            <label class="control-label col-md-2" >结算金额/比例：</label>
                            <div class="col-md-8  percentDiv ">

                                <div>
                                    预付款 ￥ <input type="text" name="preMoney" class="form-control mo"
                                                 style="width: 30%;display: inline" value="0"  readonly /> <input type="text" readonly
                                                                                                         name="prePercent"
                                                                                                         class="form-control "
                                                                                                         style="width: 12%;display: inline"
                                                                                                         value="0"

                                />%
                                </div>

                                <div>
                                    提货款 ￥ <input type="text" name="pickMoney" class="form-control mo"
                                                 style="width: 30%;display: inline" value="0" readonly/> <input type="text" readonly
                                                                                                       earnestBox                               name="pickPercent"
                                                                                                       class="form-control "
                                                                                                       style="width: 12%;display: inline"
                                                                                                       value="0" />%
                                </div>

                                <div>
                                    尾　款 ￥ <input type="text" name="endMoney" class="form-control mo"
                                                 style="width: 30%;display: inline" value="0" readonly/> <input type="text" readonly
                                                                                                        name="endPercent"
                                                                                                        class="form-control "
                                                                                                        style="width: 12%;display: inline"
                                                                                                        value="0" />%
                                </div>

                            </div>
                        </div>

                    </form>
                    <form id="main">
                        <div class=""  style="display: block;">
                            <label class="control-label col-md-2" style="">备注：</label>
                            <textarea name="remark" class="width-50" style="height: 100px;resize: none;" ></textarea>
                            <input type="hidden" name="changeContractCode" />
                            <input type="hidden" name="contractPrice" />
                            <input type="hidden" name="quantity" />
                            <input type="hidden" name="id" />
                        </div>
                    </form>
                    <div class="detail_list " style="clear: both">



                        <a href="javaScript:;" class="btn btn-success saveBtn" style="float: right">
                            <i class="fa  fa-plus-square-o"></i> 保存
                        </a>

                        <a href="javaScript:;" class="btn btn-success downloadBtn">
                            模板下载
                        </a>

                        <div style="display: inline; margin-left:5px; margin-right: 10px;" class="addnewimg" id="f_span">
													<span class="btn btn-success btn-file" id="fir">
														<span id="two">导入明细</span>
															<input name="uploadFile" upload-file="imageUrlProduct"
                                                                   type="file">
													</span>
                            <!--<div class="progress progress-striped active" role="progressbar" aria-valuemin="0"-->
                                 <!--aria-valuemax="100" style="margin-bottom: 0px; margin-top: 10px; display: none;">-->
                                <!--<div class="progress-bar progress-bar-success" style="width:0%;"></div>-->
                            <!--</div>-->
                        </div>
                        <span class="point_info" style="color: darkred">(请导入变更后的全部明细)</span>
                        <div class="box border primary" style="margin-top: 15px">
                            <div class="box-title">
                                明细列表
                            </div>
                            <div class="box-body" style="min-height: 200px">
                                <table id="importData" cellpadding="0" cellspacing="0" border="0"
                                       class="datatable table table-striped table-bordered table-hover">

                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /CONTENT-->
            </div>
        </div>
    </div>
</section>
<!-- JQUERY -->
<script src="../../js/jquery/jquery-2.0.3.min.js"></script>
<script src="../../js/common.js"></script>
<!-- JQUERY UI-->
<script src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<!-- BOOTSTRAP -->
<script src="../../bootstrap-dist/js/bootstrap.min.js"></script>
<!-- SLIMSCROLL -->
<script type="text/javascript" src="../../js/jQuery-slimScroll-1.3.0/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="../../js/jQuery-slimScroll-1.3.0/slimScrollHorizontal.min.js"></script>
<!-- BLOCK UI -->
<script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
<!--bootbox-->
<script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
<!-- AUTOSIZE -->
<script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
<!-- spinner -->
<script src="../../js/spinner/spin.js"></script>
<!-- bootstrap-fileupload -->
<script type="text/javascript" src="../../js/jquery-upload/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="../../js/jquery-upload/js/jquery.fileupload.min.js"></script>
<script type="text/javascript" src="../../js/jquery-upload/js/jquery.fileupload-process.min.js"></script>
<script type="text/javascript" src="../../js/jquery-upload/js/jquery.fileupload-validate.min.js"></script>

<!-- INPUT MASK -->
<script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>

<!-- SELECT2 -->
<script type="text/javascript" src="../../js/select2/select2.min.js"></script>
<!-- UNIFORM -->
<script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>
<!-- WIZARD -->
<script src="../../js/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
<!-- WIZARD -->
<script src="../../js/jquery-validate/jquery.validate.min.js"></script>
<script src="../../js/jquery-validate/additional-methods.min.js"></script>
<script src="../../js/bootstrap-wizard/form-wizard.js"></script>
<!-- NESTABLE LISTS -->
<script type="text/javascript" src="../../js/nestable/jquery.nestable.min.js"></script>
<!-- COOKIE -->
<script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
<!-- CUSTOM SCRIPT -->
<script src="../../js/script.js"></script>

<script src="../../js/Sortable.min.js"></script>

<!-- DATA TABLES -->
<script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>
<script type="text/javascript" src="../../js/datatables/fnAddTr.js"></script>
<script>
    var datetables = null;
    var contractId = $.getUrlParam("contractId");
    var opType = $.getUrlParam("opType");
    var changeContractCode = $.getUrlParam("changeContractCode");
    var contractType ;
    var id =  $.getUrlParam("id");;
    var    prePercent,pickPercent,endPercent;
    var init = function () {
        App.init();
        initContractType();
        $("[name=changeContractCode]").val(changeContractCode);



        $('select').select2();

        //新增合同
        if (id == null) {
        }


        //初始化编辑
       initEditData();



    }

    var initContractType = function() {
        $.ajax({
            type: "get",
            url: App.getContextPath() + "admin/contract/findByCode.do?code="+changeContractCode,
            async:false,
            success: function (data) {
                contractType = data.contractType;


                prePercent = data.prePercent;
                pickPercent = data.pickPercent;
                endPercent = data.endPercent;
               $("#changeContractCode div:eq(0)").text(data.contractCode==null?"":data.contractCode);

                $("#changeContractCode div:eq(1)").text(data.changeContractCode);

                //导入模板
                $("[upload-file=imageUrlProduct]").fileupload({
                    url: App.getContextPath() + "admin/contract/loadDetail.do?contractType="+contractType,
                    dataType: 'json',
                    acceptFileTypes: /(\.|\/)(xlsx)$/i,
                    iframe: true,
                    start: function (e) {
                        $('.progress').fadeIn(300);
                        return true;
                    },
                    autoUpload: true,
                    done: function (e, data) {
                        if (data.result.type == 'error') {
                            $.alert("导入模板错误");
                        } else {

                            initDateTable(data.result.extra);
                        }

                    },
                    progressall: function (e, data) {
                        var progress = parseInt(data.loaded / data.total * 100, 10);
                        $('.progress .progress-bar').css('width', progress + '%');
                    }
                }).on('fileuploaddone', function (e, data) {
                    $(".progress").fadeOut(300);

                });


            }
        });
    }






    //下载
    $(".downloadBtn").click(function () {
        if(contractType == "Material") {
            location.href = App.getContextPath() + "admin/contract/downloadMaterialTemplate.do";
        }else{
            location.href = App.getContextPath() + "admin/contract/downloadGoodsContractTemplate.do";
        }
    });



    var checkForm = function (mainJson) {

        if (datetables == null) {
            $.alert("请先导入明细");
            return false;
        }


        return true;
    }
    $(".saveBtn").click(function () {

        var mainJson = $("#main").serializeObject();

        if (!checkForm(mainJson)) {
            return false;
        }

        var api = datetables.api();
        var datas = api.rows().data();
        var supplementContractDetail = new Array();
        for (var i = 0; i < datas.length; i++) {
            if (datas[i].remark != "" ) {
                $.alert("订单数据有误");
                return;
            }
            supplementContractDetail.push(datas[i]);
        }


        mainJson.supplementContractDetail = supplementContractDetail;
        mainJson.id = id;
        mainJson = JSON.stringify(mainJson);
        $.ajax({
            type: "post",
            url: App.getContextPath() + "admin/contract/saveSupplementContract.do",
            data: {contractStr: mainJson},
            async: false,
            success: function (result) {
                if (result.type == "error") {
                    $.alert(result.extra);
                } else {
                   location.href = "settlement_contract.html?changeContractCode="+changeContractCode;
                }
            }
        });


    });






    var initDateTable = function (data) {
        var dtSetting = {
            "serverSide": false,
            "bFilter": false,// 去掉搜索框
            "sScrollX": "100%",
            "sScrollXInner": "100%",
            "bSort": false,
            "paging": false,
            "data": data,
            "info": false,
            "bDestroy": true,
            "drawCallback": function (settings) {
                var api = this.api();
                var datas = api.rows().data();
                var amount = 0;
                var goodsAccount = 0;
                for (var i = 0; i < datas.length; i++) {
                    var e = datas[i];
                    amount += e.price * e.quantity;
                    goodsAccount += e.quantity;
                }
                $("[name=contractPrice]").val(amount);
                $("[name=quantity]").val(goodsAccount);



                $("#changeContractCode div:eq(3)").text(goodsAccount);
                $("#changeContractCode div:eq(2)").text(amount);
                $("[name=preMoney]").val( (amount*prePercent).toFixed(2) );
                $("[name=endMoney]").val((amount*endPercent).toFixed(2));
                $("[name=pickMoney]").val((amount*pickPercent).toFixed(2));


                $("[name=prePercent]").val(prePercent*100);
                $("[name=pickPercent]").val(pickPercent*100);
                $("[name=endPercent]").val(endPercent*100);

            },
            "aoColumns": [{
                "mDataProp": "skuCode",
                "sTitle": "SKU编码",
                "width": "6%"
            }, {
                "mDataProp": "outCode",
                "sTitle": "款号",
                "width": "6%"
            }, {
                "mDataProp": "productName",
                "sTitle": "商品名称",
                "width": "10%"
            }, {
                "mDataProp": "color",
                "sTitle": "颜色",
                "width": "6%"
            }, {
                "mDataProp": "sizeName",
                "sTitle": "尺码大小",
                "width": "6%"
            }, {
                "mDataProp": "quantity",
                "sTitle": "数量",
                "width": "6%"
            }, {
                "mDataProp": "price",
                "sTitle": "单价",
                "width": "6%"
            }, {
                "sTitle": "SKU金额",
                "width": "6%",
                "render": function (data, type, row) {
                    return (row.quantity * row.price).toFixed(4);
                }
            }, {
                "mDataProp": "arrivedDate",
                "sTitle": "预计到货日期",
                "width": "6%",
                "render": function (data, type, row) {
                    return $.getLocalDate(data);
                }
            }, {
                "mDataProp": "isNewProduct",
                "sTitle": "是否新品",
                "width": "6%",
                "render": function (data, type, row) {

                    if (row.newProduct) {
                        return "是";
                    } else {
                        return "否";
                    }

                }
            }, {
                "mDataProp": "remark",
                "sTitle": "错误提示",
                "width": "10%",
                "render": function (data, type, row) {
                    if (row.remark == null) {
                        return "";
                    } else {
                        return "<span style='color: red;'>" + row.remark + "</span>";
                    }
                }
            }]
        };
        datetables = $("#importData").dataTable(dtSetting);

    }

    var initEditData = function () {
        if (id == null) {
            return;
        }

        $.ajax({
            type: "get",
            url: App.getContextPath() + "admin/contract/findSupplementDetailById.do?id=" + id,
            async: false,
            success: function (data) {
                $("#changeContractCode div:eq(0)").text(data.changeContractCode);

                //只读
                if(opType == "view") {
                    $("textarea").attr("disabled","disabled");
                    $(".btn").remove();
                    $(".point_info").hide();

                    $("#changeContractCode div:eq(1)").text(data.contractCode==null?"":data.contractCode);
                    $("#changeContractCode div:eq(3)").text(data.quantity);
                    $("#changeContractCode div:eq(2)").text(data.contractPrice);
                    $("input").attr("disabled","disabled");
                    $("[name=preMoney]").val(data.preMoney);
                    $("[name=prePercent]").val(data.prePercent*100);
                    $("[name=pickMoney]").val(data.pickMoney);
                    $("[name=pickPercent]").val(data.pickPercent*100);
                    $("[name=endMoney]").val(data.endMoney);
                    $("[name=endPercent]").val(data.endPercent*100);


                }


                $("[name=changeContractCode]").val(data.changeContractCode);
                $("[name=contractPrice]").val(data.contractPrice);
                $("[name=quantity]").val(data.quantity);
                $("[name=remark]").text(data.remark);
                $("[name=id]").text(data.id);





                initDateTable(data.supplementContractDetail);

            }
        });

    }








    $(function () {
        $("#header").load("../head.html");
        init();
    });
</script>

<!-- /JAVASCRIPTS -->
</body>

</html>